<template>
  <div class="pay-box">
    <div v-if="title"
         class="header">{{ title }}
    </div>
    <div v-else
         :style="{height: 0}"
         class="header"/>

    <div class="body">
      <slot>
        <component :is="component"
                   v-if="component"/>
      </slot>
    </div>
  </div>
</template>

<script lang="ts"
        setup>
import type {Component} from 'vue'

defineProps<{
  title?: string
  component?: Component
}>()
</script>

<style lang="less"
       scoped>
.pay-box {
  background-color: #fff;
  padding: 0 20px;

  .header {
    height: 70px;
    padding-left: 10px;
    display: flex;
    align-items: center;
    font-size: 16px;
    border-bottom: 1px solid #f5f5f5;
  }

  .body {
    padding: 20px 0;
  }
}
</style>